<template>
  <div>
    <el-select
      v-model="selectVal"
      placeholder="请选择"
      style="width: 100%"
      clearable
    >
      <el-option
        v-for="item in initOption"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    config: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      selectVal: "",
      initOption: [],
      option: [
        { label: "姓名", value: "name" },
        { label: "手机号", value: "phone" },
        { label: "邮箱", value: "email" },
        { label: "ID", value: "id" },
        { label: "标题", value: "title" }
      ]
    };
  },
  watch: {
    config: {
      handler() {
        this.InitOption();
      },
      immediate: true
    }
  },
  methods: {
    InitOption() {
      let initData = this.config.init;
      // 数据校验
      if (initData.length === 0) {
        console.log("config的参数是空，无法显示下拉菜单");
        return false;
      }
      let optionArr = [];
      initData.forEach(item => {
        let arr = this.option.filter(ele => ele.value === item); // filter匹配成功后返回一个数组，需要取下标第一个
        if (arr.length > 0) {
          optionArr.push(arr[0]);
        }
      });
      // 数据校验
      if (optionArr.length === 0) {
        console.log("匹配的数据为空");
        return false;
      }
      // 初始化赋值
      this.initOption = optionArr;
      // 初始化搜索类型
      this.selectVal = optionArr[0].value;
    }
  }
};
</script>

<style scoped></style>
<!--
组件目录位置：src > components > select > index.vue
组件引用方式：import selectVue from "@c/select";
template  <selectVue :config="data.configOption"/>

参数配置：
configOption: {
    init: [],
},
init:
    数据类型: Array,
    可配置的数据："name", "phone", "email", "id", "title"
...
-->

